<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 未完成的题目：./监听对象的属性变化.png
        const map = new WeakMap();
        function wrap(obj) {
            const handler = {
                get(target, key) {
                    // track(key, target[key]);
                    if(typeof target[key] === 'object') { // 实现深层次监听懒加载的核心思路：对象代理化——明确一种理解：只要是我们创建proxy对象时handler中的set和get函数保证了基本的访问和修改逻辑，那么obj对象的proxy代理对象使用起来是完全等价于obj对象的，所以说一旦某个属性被get，也就是被外部使用，我们才对它进行“对象代理化”操作
                        return wrap(target[key]);
                    }
                    return target[key];
                },
                set(target, key, newValue) {
                    // trigger(target, key, newValue);
                    target[key] = newValue;
                    return true; // mdn要求
                }
            };
            const p = new Proxy(obj, handler);
            return p;
        }
        function trigger(target, key, value) {
            // if(key === 'length') {
            //     console.log(`属性${map.get(target).join('.')}新增了一个元素，一共有${value}个元素`);
            //     return;
            // }
            // console.log(`属性${map.get(target).join('.')}从${target[key]}变成了${value}`);
        }
        function track(parentObj, key) {
            // let attrMap = map.get(parentObj);
            // if(!attrSet) {
            //     map.set(parentObj, attrMap = new Map());
            // }

            // let keysArr = attrMap.get(key);
            // if(!keysArr) {
            //     attrMap.set(key, keysArr = [])
            // }

            // keysArr.push(map.get(parentObj))
            
        }
        let obj = {
            a: 1,
            b: {
                c: 1
            },
            d: [1, 2, 3]
        }
        obj = wrap(obj);
        console.log(obj.b.c);
        console.log(obj.d);
        console.log(obj.d[1]);
        obj.d.push(4);
        obj.b.c = 2;
    </script>
</body>
</html>